<template>
  <div class="plan">
    <div class="header">
      <el-cascader
        v-model="majorNameKeyWords"
        size="large"
        placeholder="专业"
        :options="educateTypeOption"
        :props="props"
      />
      <el-select v-model="soldierKeyWords" clearable class="m-2" placeholder="全部计划" size="large" style="width: 120px;">
        <el-option
          v-for="item in planTypeOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button type="primary" color="#ff7214" size="large" @click="getPlanList" style="color: #fff">查询</el-button>
    </div>
    <div class="list" v-loading="loading" element-loading-text="数据加载中...">
      <div class="filter" v-if="isSearch">
        <div class="item">
          <div class="left">
            <div class="title">院校位置</div>
            <img class="arrow" src="../../assets/images/arrow_right.png" />
          </div>
          <div class="center" :class="{ active: selectArea === '全部' }" style="font-size: 14px; cursor: pointer" @click="clickItem({ name: '全部' })">全部</div>
          <div class="pro-right">
            <div class="a-con">
              <div class="a-left">A区</div>
              <div class="a-right">
                <div class="ele" v-for="ele in provinceData.azone" :key="ele.code" :class="{ active: ele.name === selectArea }" @click="clickItem(ele)">{{ ele.name }}</div>
              </div>
            </div>
            <div class="a-con">
              <div class="a-left">B区</div>
              <div class="a-right">
                <div
                  class="ele"
                  :class="{ active: ele.name === selectArea }"
                  v-for="ele in provinceData.bzone"
                  :key="ele.code"
                  @click="clickItem(ele)"
                >
                  {{ ele.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <div class="title">学校层次</div>
            <img class="arrow" src="../../assets/images/arrow_right.png" />
          </div>
          <div class="right">
            <div class="ele" :class="{active: selectTag === '全部'}" @click="clickTag('全部')">全部</div>
            <div class="ele" v-for="ele in schoolType" :key="ele" :class="{ active: ele === selectTag }" @click="clickTag(ele)">{{ ele }}</div>
          </div>
        </div>
      </div>
      <ListItem :data="listData"></ListItem>
      <Pagination
        v-if="listData.length> 0"
        :total="total"
        :pageNum="pageNum"
        :pageSize="pageSize"
        @currentChange="pageChange"
        @sizeChange="sizeChange"
      ></Pagination>
    </div>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import { decrypt } from '@/utils/parseDate'
import ListItem from '@/components/listItem/ListItem.vue'
import Pagination from '@/components/pagination/Pagination'
import {planList, professionList, second, train, specialPlan, school,schoolLevel,province} from '@/api/api'
import {useStore} from 'vuex'
// 获取store
const store = useStore()
const majorNameKeyWords = ref('')
// 加载重
const loading = ref(false)
// 计划类型
const soldierKeyWords = ref('')
const planTypeOptions = ref([])
// 培养类型:学硕 专硕
const educateTypeOption = ref([
  {
    label: '学术型硕士',
    value: 1
  },
  {
    label: '专业学位硕士',
    value: 2
  }
])
const props = {
  lazy: true,
  children: 'children',
  // leaf: 'isLeaf',
  lazyLoad: (node, resolve) => {
    const { level, pathValues } = node
    if (level === 1) {
      train().then(res=>{
        if(res.status === 0){
          let arr = []
					if(pathValues[0]==1){
						arr = res.result.subjectCategoryRsps.map(ele => ({
							label: ele.subjectCategoryName,
							leaf: level >= 3,
							value: ele.subjectCategoryCode
						}))
					} else if(pathValues[0]==2){
						arr = res.result.subjectCategoryRspsForZhuan.map(ele => ({
							label: ele.subjectCategoryName,
							leaf: level >= 3,
							value: ele.subjectCategoryCode
						}))
					}
          resolve(arr)
        } else {
          resolve(undefined)
        }
      })
      
    }
    if(level === 2){
      second({ subjectCategoryCode:pathValues[1] ,educateType: pathValues[0] }).then(res => {
        if(res.status ===0){
          const arr = res.result.map(ele=>({
            label:ele.major1Name,
            leaf: level>=3,
            value: ele.major1Code
          }))
          if(arr.length === 0){
            resolve(undefined)
          } else {
            resolve(arr)
          }
        }else {
          resolve(undefined)
        }
      })
    }
    if(level === 3){
      professionList({educateTypes: pathValues[0],subjectCategoryCode: pathValues[1],major1Code: pathValues[2]}).then(res=>{
        if(res.status === 0){
          const arr = res.result.data.map(ele=>({
            label:ele.majorName,
            value:ele.majorCode,
            leaf: level>=3
          }))
          resolve(arr)
        } else {
          resolve(undefined)
        }
      })
    }
    if(level === 4){
      resolve(undefined)
    }
  }
}
// 分页
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 页码改变
function pageChange(page){
  pageNum.value = page
  if(majorNameKeyWords.value){
    getPlanList()
  } else {
    getTestPlanList()
  }
}
// 分页大小改变
function sizeChange(size){
  pageSize.value = size
  if(majorNameKeyWords.value){
    getPlanList()
  } else {
    getTestPlanList()
  }
}
// 列表数据
const listData = ref([])
// 是否搜索
const isSearch = ref(false)
// 获取士兵计划和少干计划列表
async function getPlanList(){
	try { 
    if(!majorNameKeyWords.value){
      ElMessage.warning('请输入专业代码!')
      return
    }
    if(!soldierKeyWords.value) {
      ElMessage.warning('请选择计划类型!')
      return
    }
    loading.value = true
		const data= {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
			soldierKeyWords: soldierKeyWords.value,
      provinceCodes: provinceCode.value,
      tag: selectTag.value === '全部'? '' : selectTag.value,
			majorCode: majorNameKeyWords.value[majorNameKeyWords.value.length - 1]
		}
		const result = await planList(data)
    const res = JSON.parse(decrypt(result))
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if(res.status === 0 && res.result &&  res.result.data.length> 0){
      res.result.data.forEach(ele=>{
        if(ele.schoolTag){
          ele.schoolTag= ele.schoolTag.split('|')
        }
        ele.checked = false
      })
      isSearch.value = true
      total.value = res.result.total
      listData.value = res.result.data
    } else {
      listData.value = []
    }
    loading.value = false
	} catch (error) {
    loading.value = false
		// throw new Error(error)
	}
}
async function getTestPlanList(){
  try {
    loading.value = true
    const data= {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      soldierKeyWords: '士兵计划',
      majorCode: majorNameKeyWords.value[majorNameKeyWords.value.length - 1] || '010100'
    }
    const result = await planList(data)
    const res = JSON.parse(decrypt(result))
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if(res.status === 0){
      res.result.data.forEach(ele=>{
        if(ele.schoolTag){
          ele.schoolTag= ele.schoolTag.split('|')
        }
        ele.checked = false
      })
      total.value = res.result.total
      listData.value = res.result.data
    }
    loading.value = false
  } catch (error) {
    loading.value = false
    // throw new Error(error)
  }
}
// 获取计划类型
async function getSpecialPlan(){
  try{
    const data = await specialPlan()
    if(data.status === 0){
      planTypeOptions.value = JSON.parse(data.result)
    }
  }catch (e) {}
}
// 获取所有省份
const provinceData = ref([])
const selectArea = ref('全部')
const provinceCode = ref('')
// 点击选项
function clickItem(val) {
  if(!(selectArea.value === val.name)){
    selectArea.value = val.name
    provinceCode.value = val.name === '全部'? '' :  val.code
    getPlanList()
  }
}
async function getProvince() {
  try {
    const result = await province()
    if (result.status === 0) {
      provinceData.value = result.result
    }
  } catch (error) {
  }
}
// 默认选中的学校标签
const selectTag = ref('全部')
// 点击学校类型标签
function clickTag(val) {
  if(!(selectTag.value ===val)){
    selectTag.value = val
    getPlanList()
  }
}
// 学校层析options
const schoolType = ref([])
// 获取学校层次options
async function getSchoolLevel() {
  try {
    const result = await schoolLevel()
    if (result.status === 0) {
      schoolType.value = JSON.parse(result.result)
    }
  } catch (error) {
    // throw new Error(error)
  }
}
onMounted(()=>{
  getTestPlanList()
  getSpecialPlan()
  getSchoolLevel()
  getProvince()
})
</script>
<style scoped lang="less">
.plan{
  box-sizing: border-box;
  padding-top: 16px;
  height: 100%;
	width: 100%;
  .header{
    height: 54px;
    padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
    .el-select{
      margin-right: 10px;
    }
    /deep/ .el-cascader{
      margin-right: 10px;
      width: 360px;
    }
  }
	.list{
		padding: 0 calc((100vw - 1200px)/2);
		min-width: 1200px;
		height: calc(100% - 54px);
		overflow: auto;
	}
  .filter {
    box-sizing: border-box;
    height: 180px;
    margin-top: 12px;
    padding: 20px 20px 10px;
    margin: 0 calc((100% - 1200px)/2);
		min-width: 1200px;
    margin-top: 10px;
    border: 1px solid rgb(238, 238, 238);
    .item {
      margin-bottom: 12px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: start;
      .active {
        color: #ff7214;
      }
      .left {
        display: flex;
        align-items: center;
        width: 100px;
        .arrow {
          margin-top: -1px;
          margin-left: 12px;
          width: 12px;
          height: 12px;
        }
      }
      .right {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .ele {
          margin-bottom: 12px;
          padding: 0 12px;
          font-size: 14px;
          cursor: pointer;
        }
        .ele:hover {
          color: #ff7214;
          cursor: pointer;
        }
      }
      .pro-right {
        margin-left: 24px;
        display: block;
        flex: 1;
        font-size: 14px;
        .a-con {
          margin-bottom: 12px;
          display: flex;
          //align-items: center;
          .a-left {
            width: 40px;
            color: #666;
          }
          .a-right {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            .ele {
              margin-bottom: 12px;
              padding: 0 12px;
              font-size: 14px;
              cursor: pointer;
            }
            .ele:hover {
              color: #ff7214;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
